<template>
  <div class="app-container" style="background: black">
    <el-row>
      <el-col :span="8"><dv-decoration-8 style="width: 300px; height: 50px" /></el-col>
      <el-col :span="8"
        ><dv-decoration-7 style="height: 50px; color: white"> <h1>涂装车间物料实时看板</h1></dv-decoration-7></el-col
      >
      <el-col :span="8"><dv-decoration-8 :reverse="true" style="width: 300px; height: 50px; float: right" /></el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <h2>当前零件已配百分比</h2>
        <dv-decoration-9 style="width: 150px; height: 150px; margin: 0 auto"><h1>66%</h1></dv-decoration-9>
      </el-col>
    </el-row>

    <div>
      <vxe-table border resizable align="center" ref="xTable" :data="tableData" :row-style="rowClassName" :cell-style="cellStyle">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="online_time" title="时间段"></vxe-column>
        <vxe-column field="num" title="库位号"></vxe-column>
        <vxe-column field="part_NO" title="零件号"></vxe-column>
        <vxe-column field="part_name" title="零件名称" type="html"> </vxe-column>
        <vxe-column field="online_time" title="已配站点1数量"></vxe-column>
        <vxe-column field="online_time" title="已配站点2数量"></vxe-column>
        <vxe-column field="online_time" title="已配站点3数量"></vxe-column>
        <vxe-column field="online_time" title="已配站点4数量"></vxe-column>
        <vxe-column field="online_time" title="已配站点5数量"></vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import jihe from '@/views/kanbanManagement/jihe'
import jihe1 from '@/views/kanbanManagement/jihe1'
export default {
  name: 'kanban',
  data() {
    return {
      tableData: [
        {
          Date: '2016/3/22',
          shift: '夜班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          NOProductionQuantity: 20,
          num: 1234132,
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          NOProductionQuantity: 85,
          num: 13241324,
        },
        {
          Date: '2016/3/22',
          shift: '夜班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          NOProductionQuantity: 85,
          num: 264764,
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          NOProductionQuantity: 85,
          num: 27685,
        },
        {
          Date: '2016/3/22',
          shift: '白班',
          team: 'A',
          round: '08',
          online_time: '03/23 00:09:45',
          work_order: 'W0234',
          vehicle_NO: '059-063',
          part_SN: '177',
          part_NO: '300504103',
          part_name: 'SGM201左外镜副镜壳银河灰',
          paintCode: '1551',
          ProgramCode: '0041',
          QuantityPerRack: '20',
          RackQuantity: '6',
          ShareRack: '85',
          ProductionQuantity: '85',
          NOProductionQuantity: 85,
          num: 178968,
        },
      ],
    }
  },
  components: { jihe, jihe1 },
  methods: {
    cellStyle({ rowIndex, column }) {
      if (column.field === 'NOProductionQuantity') {
        if ([0].includes(rowIndex)) {
          return {
            backgroundColor: 'red',
          }
        }
      }
    },
    rowClassName({ rowIndex }) {
      if ([0].includes(rowIndex)) {
        return {
          backgroundColor: '#24eb2c',
          color: '#ffffff',
        }
      } else {
        return null
      }
    },
  },
}
</script>

<style lang="scss" scoped>
h1 {
  color: white;
}
h2 {
  text-align: center;
  color: white;
}

.producting {
  width: 60px;
  height: 60px;

  background: green;
  border: 1px solid green;
  border-radius: 50%;
  margin: 5px auto;
}

.productstop {
  width: 60px;
  height: 60px;
  background: gray;
  border: 1px solid gray;
  border-radius: 50%;
  margin: 5px auto;
}
::v-deep .vxe-table--render-default {
  font-size: 20px;
}
</style>
